Jens Grochtdreis (webkrauts.de) hat auf den JavaScript Days 2019 über Responsive Webdesign in der Praxis gesprochen. Im Interview haben wir ihm einige Fragen dazu gestellt: Was genau versteht man darunter und wie erreicht man ein gelungenes responsives Design? Wie kann Bootstrap dazu eingesetzt werden, das Webdesign zu optimieren und warum ist das Grid-Layout dafür ein responsives Design von zentraler Bedeutung? Antworten darauf gibt Jens Grochtdreis im Video.
Ann-Cathrin Klose: Hallo und herzlich willkommen auf den JavaScript Days 2019 in München. Mein Name ist Ann-Cathrin Klose und ich unterhalte mich heute mit Jens Grochtdreis von den Webkrauts über das Thema Responsive Webdesign. Hallo, Jens! Fangen wir doch erstmal ganz grundlegend an. Im Bereich des Webdesigns fliegen ganz viele Begriffe durch die Gegend: Responsive Design, Accessibility, PWAs. Worum geht es denn wirklich beim Responsive Design an sich?
Jens Grochtdreis: Es geht schlicht und ergreifend darum, dass deine Webseite auf möglichst jedem Endgerät adäquat betrachtet werden kann. Für mich ist das ein Teil der gleichen Medaille wie Accessability. Es geht eigentlich nur darum, dass meine Seite oder meine Applikation möglichst viele Menschen erreicht. Wenn immer mehr Menschen mit Smartphones durch die Gegend laufen, die eine kleinere Bildschirmfläche haben als der Desktoprechner, dann muss ich einfach dafür sorgen, dass die Inhalte dort adäquat betrachtbar und bedienbar sind. Bei Accessibility ist es eigentlich ähnlich: Wenn ich weiß, dass es Menschen gibt, die farbfehlsichtig sind, muss ich einfach dafür sorgen, dass die Farbkombinationen auf meiner Webseite dementsprechend angepasst sind, und so weiter und sofort. Responsive Webdesign kümmert sich darum, dass du die Inhalte überall sehen und konsumieren kannst.
Ann-Cathrin Klose: Da geht es dann auch um Mobilgeräte und da wiederum auch um das Konzept der Progressive Web Apps. Wo verläuft da die Grenze zwischen der Anwendbarkeit des einen oder des anderen Konzepts?
Jens Grochtdreis: Progressive Web Apps sind einfach eine zusätzliche Spielart, die sich innerhalb des Gedankenraums Responsive Webdesign irgendwann entwickelt hat. Hinter Responsive Webdesign steckt die Erkenntnis, dass es so viele Endgeräte gibt, dass ich mich nicht um das Endgerät als solches zu kümmern habe, sondern einfach nur darum, dass meine Seite als solche an die Umgebung anpassbar ist. Dass es mir vollkommen wurscht ist, auf welcher Endumgebung ich mir das angucken kann; es kann auch eine Oberfläche im Auto sein. Das ist erstmal die grobe Erkenntnis. Dafür gibt es ein Schlagwort: Responsive Webdesign. PWA ist innerhalb dieser Erkenntnis eigentlich mehr eine Technik, um sich Extraapplikationen zu sparen. Ich kann jetzt also aus einer Webseite etwas applikationsähnliches machen und muss nicht extra Programmierer nur für Android und nur für IOS beschäftigen. Das ist was komplett anderes und hat miteinander erstmal zwangsweise gar nichts zu tun.
Ann-Cathrin Klose: Dann bleiben wir bei dem Responsive Webdesign an sich. Was steckt da technisch hinter? Wie setzt man das um?
Jens Grochtdreis: Die Technik kommt eigentlich erst im Zweiten. Wie bei vielem anderen, beginnt es mit dem Planen und dem Denken. Wenn man erkannt und verstanden hat, dass der eigene Rechner nicht das Zentrum der Welt ist, dass es nicht wichtig ist, wie es auf dem eigenen Rechner aussieht, sondern dass es nur ein kleiner Ausschnitt der Möglichkeiten ist, dann plant man eine Webseite auch flexibler. Wenn dieses flexible Denken da ist, dann kann man auch mit der Technik loslegen. Bei der Technik brauche ich – nicht immer, aber oftmals – Media Querys. Das sind kleine Codeschnipsel in meinem CSS, die sagen: „Wenn dein Browser eine bestimmte Breite erreicht oder überschritten hat oder innerhalb eines Breitenbereichs ist, dann bitteschön sollen folgende Stylinganweisungen gelten.“ Ich kann also abhängig von der Breite meines Browsers Stylinganweisungen zuweisen – das ist schonmal ganz gut.
Dann ist es ganz wichtig, mit relativen Maßen zu arbeiten. Nicht mehr dem eigenen Grid zu sagen: „der Grid-Bereich ist 20 oder 100 Pixel breit“, statt dessen arbeiten wir nur noch mit Prozenten, damit sich das Layout an die wechselnde Breite des Bildschirms anpassen kann. Das ist ganz wichtig. Des Weiteren, was leider immer noch zu wenig gemacht wird: Man kann auch Bilder so einbauen, dass der Browser erkennt, welches er laden soll, weil er ja weiß, wie breit er ist. In Abhängigkeit dieses Wissens kann der Browser ein exakt passendes Bild laden und muss nicht das 2000 Pixel breite Bild für ein Smartphone laden, das zwar runterskaliert wird, aber immer noch 2000 Pixel breit ist und viel zu schwer. Was gerade in Ländern wie Deutschland ganz interessant ist, denn wenn man hier mobil unterwegs ist, hat man immer einen sehr schmalen Datentarif und meist eine schlechte Internetverbindung. Wenn das Bild da kleiner ist, ist es für alle Beteiligten gut: Der Datentarif hält länger und die Seite ist schneller geladen.
Ann-Cathrin Klose: Im Bereich des Grid-Designs hört man immer wieder den Begriff Bootstrap. Worum geht es da und was kann man mit Bootstrap als Tool machen?
Jens Grochtdreis: Bootstrap ist ein Tool, genau. Es ist eine Sammlung von CSS-Modulen, also von Modulen einer Seite. Ich kann mir damit schlicht und ergreifend Arbeit ersparen. Es ist nur die Frage, ob ich die Module, die mir dieses Framework bietet, auch tatsächlich benötige. Es bietet mir eine Anzahl von Modulen, eine Navigation, die extrem langweilig ist, diverse Kleinstmodule für den Inhalt und ein Grid-System. Je nachdem, was ich davon brauche, kann ich mir das nehmen und das CSS so zusammendampfen, dass es nicht mehr den kompletten Umfang hat, sondern bisschen leichter ist. Ich kann mir damit einfach Arbeit sparen. Da gibt’s wie immer große Grabenkämpfe drumherum, weil komischerweise gerade im Frontend-Bereich viele der Verwendung von Frameworks sehr kritisch gegenüberstehen. Dabei ist es im Backend-Bereich vollkommen normal, dass man Frameworks benutzt. Ich finde, auch im Frontend-Bereich spricht erstmal nichts dagegen. Aber gerade dort sollte man bisschen mit Hirn vorgehen. Also wirklich mal checken, ob all ich diese Module, die Bootstrap mir bietet, auch wirklich brauche. Wenn ich davon nur zwei brauche, dann kann ich Bootstrap auch eigentlich gleich kicken – dann brauche ich dieses System nicht.
Ann-Cathrin Klose: Natürlich, da muss man dann selektiv vorgehen und sich genau anschauen, was Bootstrap eigentlich bieten kann. In der Hinsicht hat sich auch mit Bootstrap 4 nochmal ein bisschen was geändert. Kannst du etwas dazu sagen, was mit Version 4.0 neu wurde?
Jens Grochtdreis: Mit Bootstrap 4 ist als Erstes neu, dass es die alten Internet Explorer außen vor lässt. Wer jetzt also tatsächlich noch in der dummen Lage ist, sich um den IE 9, 8, 7 oder 6 kümmern zu müssen – und davon gibt’s durchaus noch welche –, der kann mit Bootstrap 4 nichts anfangen. Ziemlich alles basiert auf Flexbox, was sehr charmant ist, Code spart, sehr flexibel und einfach zu nutzen ist und neue Möglichkeiten eröffnet – gerade beim Grid-System –, die es vorher nicht gab. Aber du kannst es halt erst ab IE 10 nutzen und auch erst dann richtig, wenn du Syntactically Awesome Style Sheets benutzt. Das heißt, du bist auch bei der Benutzung dieses Tools wiederum auf ein anderes Tool angewiesen, nämlich auf Sass, einen Präprozessor zum Erzeugen deines CSS. Wie ich das von meinen Schulungen hier auf den HTML & CSS Days weiß, hat sich das noch immer nicht so durchgesetzt, was ich sehr bedauerlich finde. Sass sollte sehr viel häufiger benutzt werden. Aber wer jetzt wirklich effizient Bootstrap benutzen möchte, sollte sich dringend mit Sass beschäftigen.
Ann-Cathrin Klose: Zum Abschluss nochmal für diejenigen, die mehr Zeit und mehr Aufwand in Responsive Design investieren möchten: Hast du da einen Tipp, wo man ansetzen sollte oder wo man besonders drauf achten muss?
Jens Grochtdreis: Umgekehrt wird ein Schuh daraus. Ich finde, jeder sollte drüber nachdenken, ob es Sinn macht, Gehirn, Schmalz und Zeit nicht darauf zu verwenden, sich mit Responsive Webdesign zu beschäftigen. Es erfordert schon einen guten Grund, seine Seite nicht anpassbar zu machen. Wenn ich eine Seite nur für das Intranet einer Firma erstelle, kontrollierte Umgebungen habe und ganz genau weiß, dass es wirklich nur Menschen mit Desktoprechnern gibt, die auf eine Seite zugreifen, dann brauch ich kein Responsive Webdesign. Aber in dem Moment, wo ich eine öffentliche Webseite mache, so wie Ihr, wäre ich mit dem Klammerbeutel gepudert, wenn die Seite nicht responsive wäre, weil ich meinen potenziellen Nutzern keine gute Experience biete und so freiwillig auf Zugriffszahlen verzichte. Jeder, der heutzutage eine öffentliche Webseite macht und keine Responsive Webseite zur Verfügung stellt, macht nichts anderes als seinem potenziellen Nutzer einen dicken Finger ins Gesicht zu strecken, weil er einfach nur sagt „das interessiert mich nicht wo, womit du kommst, ich habe dir jetzt nur das hier zu bieten“ – das ist ein bisschen doof. Da es eigentlich im Interesse eines Websitebetreibers liegen sollte, dass möglichst viele sie sehen, ist es geboten, sich Gedanken darüber zu machen, wie man das hinbekommt. Das ist Responsive Webdesign.
Ann-Cathrin Klose: Also sollte sich jeder damit beschäftigen.
Jens Grochtdreis: Eigentlich ja.
